import { useSearchParams } from "react-router-dom";
import React, { useState, useEffect } from "react";
import { Tabbar } from "react-vant";
import { Cart, WapHomeO, Bars, Manager } from "@react-vant/icons";
// import shopping from "../views/ShoppCart.module.css";
import shopping from "../views/ShoppCart.module.css";
import { Checkbox } from "antd-mobile";
import { homes } from "../api/home";
import { shopCarts } from "../api/ShopCart";
import { Stepper } from "react-vant";
export default function ShoppingCart(props) {
  let [search] = useSearchParams();
  let id = search.get("id");
  const [array, setArray] = useState(null); //商品列表
  const [shopdys, setShopcar] = useState([]);
  // 请求首页信息
  useEffect(() => {
    homes().then((res) => {
      console.log(res, "首页信息");
      setArray(res.data);
    });
  }, []);

  // 购物车列表
  useEffect(() => {
    let dysID = sessionStorage.getItem("dys");
    shopCarts({ uid: dysID }).then((res) => {
      console.log(res, "购物车信息");
      setShopcar(res.data);
    });
  }, []);

  // 计算选中商品的总数量
  const all_num = () => {
    return shopdys.reduce((pre, item) => {
      return pre + (item.checked ? item.num : 0);
    }, 0);
  };

  // 计算选中商品的总价
  const all_price = () => {
    return shopdys.reduce((pre, item) => {
      return pre + (item.checked ? item.price * item.num : 0);
    }, 0);
  };

  if (setShopcar) {
    return (
      <div>
        {/* 标头 */}
        <div className={shopping.ShoppingBig}>
          <p>购物车</p>
        </div>

        {/* 购物车商品 */}
        <div>
          {shopdys.map((items, index) => (
            <div className={shopping.big}>
              <div className={shopping.radio}>
                {/* <input type="checkbox" /> */}
                <Checkbox
                  value={items.checked}
                  checked={items.checked}
                  onChange={(checked) => {
                    let newList = [...shopdys];
                    newList[index].checked = checked;
                    setShopcar(newList);
                  }}
                >
                  {items.name}
                </Checkbox>
              </div>
              <div className={shopping.merchandise}>
                <div className={shopping.merchandiseLeft}>
                  <img src={items.imgs} alt="" />
                </div>
                <div className={shopping.merchandiseRighet}>
                  <div className={shopping.merchandiseRighettitle}>
                    <p>{items.name}</p>
                  </div>
                  <div className={shopping.merchandiseRighetLeft}>
                    <p className={shopping.merchandiseRighetLeftP}>
                    {items.price}
                      <span className={shopping.merchandiseRighetLeftSpan}>
                      {items.price}
                      </span>
                    </p>
                    <Stepper
                      value={items.num}
                      onChange={(value) => {
                        let newList = [...shopdys];
                        newList[index].num = value;
                        setShopcar(newList);
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 猜你喜欢 */}
        <div className={shopping.love_comm}>
          <div className={shopping.love_title}>
            <img src={require("../assets/爱心.png")} alt="" />
            <p>猜你喜欢</p>
            <img src={require("../assets/爱心.png")} alt="" />
          </div>
        </div>
        {/* 商品列表 */}
        <div className={shopping.scroll}>
          {array?.goods.map((item) => (
            <div className={shopping.scrollChild}>
              <img src={item.imgs} alt="" className={shopping.imge} />
              <div>{item.name}</div>
              <div className={shopping.constadd}>
                ￥{item.price}
                <button className={shopping.add}>+</button>
              </div>
            </div>
          ))}
          <div></div>
        </div>
        <div style={{ height: "30px" }}></div>
        {/* 全选价格总价合计 */}
        <div className={shopping.total}>
          <div className={shopping.totalLeftOne}>
            {/* <input type="checkbox" style={{ borderRadius: "25%" }} /> */}
            <Checkbox
              indeterminate={
                shopdys.some((item) => item.checked) &&
                shopdys.some((item) => !item.checked)
              }
              checked={shopdys.every((item) => item.checked)}
              onChange={(checked) => {
                let newList = [...shopdys];
                newList.forEach((item) => {
                  item.checked = checked;
                });
                setShopcar(newList);
              }}
            ></Checkbox>
            <p>全选</p>
          </div>
          <div className={shopping.totalRgight}>
            <p style={{ color: "red" }}>合计:{all_price()}</p>
            <div className={shopping.settlement}>
              <p>
                结算<span>{all_num()}</span>
              </p>
            </div>
          </div>
        </div>
       {/* 底部导航栏 */}
       <Tabbar activeColor="#E0AF75" inactiveColor="#000">
          <Tabbar.Item icon={<WapHomeO />}>首页</Tabbar.Item>
          <Tabbar.Item icon={<Bars />}>分类</Tabbar.Item>
          <Tabbar.Item icon={<Cart />}>购物车</Tabbar.Item>
          <Tabbar.Item icon={<Manager />}>我的</Tabbar.Item>
        </Tabbar>
      </div>
    );
  }
}
